<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="财富详情" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn"></uni-nav-bar>
			
		<view class="cf-item">
			<view class="cf-item-img">
				<image :src="item.img_path" mode="scaleToFill"></image>
			</view>
			<view class="cf-item-title">{{item.title}}</view>
			<view class="cf-item-img">
				<!-- <image src="/static/img/caifu/hq.png" mode="aspectFit"></image> -->
				<image :src="item.chart_path" mode="aspectFit"></image>
			</view>
			<view class="cf-item-info">
				<view class="item-info">
					<view class="item-info-title">每日收益(元)</view>
					<view class="item-info-num">{{item.day_profits}}</view>
				</view>
				<view class="item-info">
					<view class="item-info-title">投资金额(元)</view>
					<view class="item-info-num">{{item.investment_amount}}</view>
				</view>
				<view class="item-info">
					<view class="item-info-title">预期收益</view>
					<view class="item-info-num">{{item.prospective_earnings}}</view>
				</view>
				<view class="item-info">
					<view class="item-info-title">收益周期(天)</view>
					<view class="item-info-num">{{item.revenue_cycle}}</view>
				</view>
			</view>
			<view class="divide"></view>
			<view class="cf-item-title">项目说明</view>
			<view class="cf-item-content">
				{{item.instructions}}
			</view>
			<view class="cf-item-btn">
				<button class="btn" type="default" @click="showPoup">立即投资</button>
			</view>
		</view>
		
		<uni-popup ref="popup" :mask-click="false" :animation="false">
			<view class="popup-content">
				 <view class="popup-header">确认订单信息
					<image class="popup-close" src="../../../static/img/caifu/gb.png" mode="aspectFit" @click="closePoup"></image>
				 </view>
				 <view class="popup-title">{{item.title}}</view>
				 <view class="popup-info">
				 	<view class="item-info">
				 		<view class="item-info-title">每日收益(元)</view>
				 		<view class="item-info-num">{{item.day_profits}}</view>
				 	</view>
				 	<view class="item-info">
				 		<view class="item-info-title">投资金额(元)</view>
				 		<view class="item-info-num">{{item.investment_amount}}</view>
				 	</view>
				 	<view class="item-info">
				 		<view class="item-info-title">预期收益</view>
				 		<view class="item-info-num">{{item.prospective_earnings}}</view>
				 	</view>
				 	<view class="item-info">
				 		<view class="item-info-title">收益周期(天)</view>
				 		<view class="item-info-num">{{item.revenue_cycle}}</view>
				 	</view>
				 </view>
				 <view class="popup-num">
					 <view>购买数量</view>
					 <uni-number-box :min="1" @change="changeValue" />
				 </view>
				 
				 <view class="popup-pay">
					<view class="popup-title">支付方式</view>
					<view class="pay-ways">
						<view class="pay-item" v-for="(pay,index) in pays" :class="payId==pay.id?'active':''" :key="index" @click="choosePay(pay)">
							<image :src="pay.icon" mode="aspectFit"></image>
							<view class="pay-way">{{pay.title}}</view>
						</view>	 
					</view>
				 </view>
				<view class="popup-foot">
					<view class="pay-money">
						<view>订单总额：</view>
						<view class="pay-money-num">￥{{getTotalMoney()}}</view>
					</view>
					<button class="btn" type="default" @click="submit" :loading="isLoading" :disabled="isLoading">提交订单</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {imgUrl} from '../../../utils/global.js'
	export default {
		data() {
			return {
				item:{},
				num:1,
				payType:'',
				payId:'',
				isLoading:false,
				pays:[]
			}
		},
		methods: {
			getPays(){
				this.$http.get('/v1/get_pay_list',res => {
					this.pays = res.data
					this.pays.forEach(item => {
						item.icon = imgUrl + item.icon
					})
				})
			},
			changeValue(value) {
				this.num = value
			},
			getTotalMoney(){//计算总金额
				const money = this.item.investment_amount * this.num
				return money.toFixed(2)
			},
			choosePay(pay){//选择支付方式
				this.payType = pay.pay_type
				this.payId = pay.id
			},
			findDetail(id){//查询明细
				this.$http.get('/v1/get_goods_detail?id='+id,res => {
					this.item = res.data
					if(this.item.img_path.indexOf('http') < 0){
						this.item.img_path = imgUrl + this.item.img_path
					}
					if(this.item.chart_path.indexOf('http') < 0){
						this.item.chart_path = imgUrl + this.item.chart_path 
					}
					this.getTotalMoney()
				})
			},
			// 公告弹窗
			showPoup(){
				this.$refs.popup.open('bottom')
			},
			closePoup(){
				setTimeout(this.$refs.popup.close, 2000);
			},
			submit(){
				if(!(this.num && this.num > 0)){
					uni.showToast({
						title: '请选择数量',
						icon: 'none',
						mask: true
					})
					return
				}
				if(!this.payType){
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none',
						mask: true
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定要支付吗？',
					success: (res) => {
						if (res.confirm) {
							this.isLoading = true
							if(this.payType == 5){
								uni.switchTab({
									url:'../../kefu/kefu'
								})
								return
							}
							let para = {
								goods_id:this.item.id,
								amount:this.num,
								pay_type:this.payType,
								pay_id:this.payId
							}
							this.$http.post('/v1/place_order',para,res => {
								this.isLoading = false
								if(res.code==200){
									uni.setStorageSync('payUrl',res.data.payUrl);
									uni.showToast({
										title: res.message,
										icon: 'none',
										complete:() => {
											if(res.data.is_jump == 0 ){
												this.closePoup()
											}else{
												uni.navigateTo({
													url:'../../wode/cashin/cashpay/cashpay'
												})
											}
										}
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			
			// 返回
			goReturn() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onLoad() {
			let item = uni.getStorageSync("detailData")
			this.findDetail(item.id)
			this.getPays()
		}
	}
</script>

<style lang="scss">
	.cf-item{
		width: 690upx;
		.cf-item-title{
			color: #333333;
			font-size: 32upx;
			font-weight: 500;
			padding-top: 20upx;
			margin-bottom: 20upx;
		}
		.cf-item-img{
			width: 100%;
			height: 300upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.cf-item-info{
			width: 100%;
			height: 300upx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			.item-info{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100upx;
				.item-info-title{
					height: 40upx;
					color: #999999;
					font-size: 24upx;
				}
				.item-info-num{
					height: 60upx;
					color: #333333;
					font-size: 48upx;
				}
			}
		}
		.cf-item-content{
			font-size: 28upx;
			margin-top: 20upx;
		}
		.cf-item-btn{
			position: fixed;
			bottom: 0upx;
			width: 750upx;
			height: 120upx;
			margin-left: -30upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				width: 400upx;
				height: 80upx;
				line-height: 80upx;
			}
		}
		.divide{
			width: 750upx;
			margin-left: -30upx;
			height: 20upx;
			background-color: #F2F2F2;
			margin-top: 20upx;
		}
	}
	.popup-content{
		height: 960upx;
		border-radius: 30upx 30upx 0upx 0upx;
		width: 690upx;
		padding: 0upx 30upx;
		background-color: #FFFFFF;
		.popup-header{
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			font-weight: 600;
			border-bottom: 1px solid #F8F8F8;
			position: relative;
			.popup-close{
				content: '';
				position: absolute;
				left: 20upx;
				top: 28upx;
				background-image: url(../../../static/img/caifu/gb.png);
				background-size: 100% 100%;
				width: 44upx;
				height: 44upx;
			}
		}
		
		.popup-title{
			color: #333333;
			font-size: 32upx;
			font-weight: 500;
			padding-top: 20upx;
			margin-bottom: 20upx;
		}
		.popup-info{
			width: 100%;
			height: 280upx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #F8F8F8;
			.item-info{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100upx;
				.item-info-title{
					height: 40upx;
					color: #999999;
					font-size: 24upx;
				}
				.item-info-num{
					height: 60upx;
					color: #333333;
					font-size: 48upx;
				}
			}
		}
		.popup-num{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			border-bottom: 1px solid #F8F8F8;
		}
		.popup-pay{
			.pay-title{
				
			}
			.pay-ways{
				display: flex;
				flex-wrap: wrap;
				max-height: 200upx;
				overflow: auto;
				.pay-item{
					width: 152upx;
					height: 44upx;
					display: flex;
					justify-content: left;
					align-items: center;
					padding-left: 20upx;
					background-color: #F2F2F2;
					margin-bottom: 20upx;
					margin-right: 20upx;
					border-radius: 10upx;
					image{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
					.pay-way{
						font-size: 24upx;
						color: #666666;
					}
				}
				.active{
					background-color: #e3e8f5;
				}
			}
		}
		.popup-foot{
			width: 100%;
			position: fixed;
			bottom: 0upx;
			display: flex;
			height: 120upx;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #F8F8F8;
			.pay-money{
				display: flex;
				width: 350upx;
				color: #333333;
				font-size: 32upx;
				.pay-money-num{
					color: $red;
				}
			}
			.btn{
				height: 80upx;
				width: 300upx;
				line-height: 80upx;
				border-radius: 40upx;
			}
		}
	}
</style>
